<template>
  <uni-popup ref="popup" type="center" style="z-index: 910">
    <view class="box column">
      <view style="font-size: 32rpx;">{{title}}</view>
      <input class="uni-input" :placeholder="place" v-model="order" />
      <view class="center but" style="justify-content: space-around;width: 100%;">
        <view @click="submit()">确定</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { errorToast } from '@/utils/prompt';
  const props = defineProps({
    title: {
      type: String,
      default: '订单号',
    },
    place:{
      type: String,
      default: '请输入订单号',
    }
  });
  const popup = ref(null)
  const order = ref('')
  const emit = defineEmits(['submit']);
  function submit() {
    if (!order.value) {
      errorToast(props.place)
      return
    }
    close()
    emit('submit', order.value)
  }
  function open() {
    order.value = ''
    popup.value.open();
  }
  function close() {
    popup.value.close();
  }
  defineExpose({
    open,
    close,
  });
</script>

<style scoped lang="less">
  .box {
    width: 700rpx;
    padding: 20rpx;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 5px;

    input {
      width: 496rpx;
      height: 76rpx;
      border: 1px solid #999999;
      border-radius: 5px;
      text-align: center;
      margin: 30rpx 0px 50rpx;
    }

    .but {
      view {
        width: 240rpx;
        height: 90rpx;
        background: #558AF1;
        border-radius: 5px;
        text-align: center;
        line-height: 90rpx;
        color: #fff;
      }
    }
  }
</style>